<template>
    <div
        class="ValidCode disabled-select"
        :style="`width:${width}; height:${height}`"
        @click="refreshCode"
    >
      <span
          v-for="(item, index) in codeList"
          :key="index"
          :style="getStyle(item)"
      >{{ item.code }}</span>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ValidCode',
    model: {
      prop: 'value',
      event: 'input'
    },
    props: {
      width: {
        type: String,
        default: '100px'
      },
      height: {
        type: String,
        default: '40px'
      },
      length: {
        type: Number,
        default: 4
      },
      refresh: {
        type: Number
      }
    },
    data () {
      return {
        codeList: []
      }
    },
    watch: {
      refresh () {
        this.createdCode()
      }
    },
    mounted () {
      this.createdCode()
    },
    methods: {
      refreshCode () {
        this.createdCode()
      },
      createdCode () {
        const len = this.length
        const codeList = []
        const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
        const charsLen = chars.length
        // 生成
        for (let i = 0; i < len; i++) {
          const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
          codeList.push({
            code: chars.charAt(Math.floor(Math.random() * charsLen)),
            color: `rgb(${rgb})`,
            fontSize: `${10 + (+[Math.floor(Math.random() * 10)] + 6)}px`,
            padding: `${[Math.floor(Math.random() * 10)]}px`,
            transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
          })
        }
        // 指向
        this.codeList = codeList
        // 将当前数据派发出去
        // console.log(codeList.map(item => item.code).join(''))
        this.$emit('input', codeList.map(item => item.code).join(''))
      },
      getStyle (data) {
        return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
      }
    }
  }
  </script>
  
  <style scoped>
  .ValidCode{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .ValidCode span{
    display: inline-block;
  }
  </style>
  